<template>
  <div>
    <common-head title="购物车"></common-head>
    <div class="wrap">
      <div class="items" v-for="item in items" :key="item.id">
        <van-swipe-cell>
          <div class="item">
            <van-checkbox v-model="item.selected" @click="changeChecked(item.key, item.selected)" />
            <van-card
              :num="item.number"
              :price="item.price"
              :title="item.name"
              :thumb="item.pic"
            >
            <template #footer>
              <van-stepper v-model="item.number" @change="changeNum(item.key, item.number)"/>
            </template>
            </van-card>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="removeCart(item.key)" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
     <div class="count-bottom">
      <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar'
import CommonHead from '@components/CommonHead'
import { mapActions, mapState, mapMutations } from 'vuex'
import { changeCart, removeCart, changeCartChecked } from '@api'
import { Dialog } from 'vant'
export default {
  components: {
    Tabbar,
    CommonHead
  },
  data () {
    return {
    }
  },
  created () {
    this.get_cart()
  },
  methods: {
    changeChecked (key, selected) {
      changeCartChecked({
        key,
        selected,
        token: localStorage.getItem('token')
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.init_cart_info({
            items: res.data.data.items,
            total: res.data.data.price
          })
        }
      })
    },
    removeCart (key) {
      Dialog.confirm({
        title: '警告！',
        message: '您确认删除该商品么？'
      })
        .then(() => {
          removeCart({
            key,
            token: localStorage.getItem('token')
          }).then(res => {
            console.log(res)
            if (res.data.code === 0) {
              this.init_cart_info({
                items: res.data.data.items,
                total: res.data.data.price
              })
            }
            if (res.data.code === 700) {
              this.init_cart_info({
                items: [],
                total: 0
              })
            }
          })
        })
    },
    changeNum (key, number) {
      changeCart({
        key,
        number,
        token: localStorage.getItem('token')
      }).then(res => {
        if (res.data.code === 0) {
          this.init_cart_info({
            items: res.data.data.items,
            total: res.data.data.price
          })
        }
      })
    },
    onSubmit () {
      // 提交订单
      this.$router.replace('/confirmOrder')
    },
    ...mapActions('cart', ['get_cart']),
    ...mapMutations('cart', ['init_cart_info'])
  },
  computed: {
    ...mapState({
      items: state => state.cart.items,
      total: state => state.cart.total
    }),
    itemsKeys () {
      const keys = []
      this.items.forEach(item => {
        keys.push(item.key)
      })
      return keys
    },
    allChecked: {
      get () {
        return this.items.every(item => item.selected)
      },
      set (val) {
        // 在set中修改依赖 发送请求将所有商品的状态变成false
        changeCartChecked({
          key: this.itemsKeys.join(','),
          selected: val,
          token: localStorage.getItem('token')
        }).then(res => {
          if (res.data.code === 0) {
            this.init_cart_info({
              items: res.data.data.items,
              total: res.data.data.price
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding: 40px 0 100px;
    .items {
    background-color: #fff;
    .item {
      display: flex;
      .van-checkbox{
        padding-left: 10px;
      }
      .van-card{
        flex: 1;
      }
    }
    .delete-button {
      height: 100%;
    }
  }
}
.count-bottom{
      .van-submit-bar{
        bottom: 46px;
      }
    }
</style>
